<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-12-列表渲染</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>

<!-- 面试题：react、vue 中的 key 有什么作用?（key 的内部原理）
    1、虚拟 DOM 中 key 的作用：
        key 是虚拟 DOM 对象的标识, 当状态中的数据发生变化时, Vue 会根据新数据生成新的虚拟 DOM,
        随后 Vue 进行新虚拟 DOM 与旧虚拟 DOM 的差异比较, 比较规则如下：

    2、对比规则：
        （1）旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：若虚拟 DOM 中内容没有变化,直接使用之前的真实 DOM,
            若虚拟 DOM 中内容有变化,则生成新的真实 DOM, 随后替换掉页面中之前旧的真实 DOM
        （2）旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key：创建新的真实 DOM, 随后渲染到页面上

    3、用 index 作为 key 可能会引发的问题：
        （1）若对数据进行：逆序添加、逆序删除等破坏数据之前顺序的操作时, 会产生没有必要的真实 DOM 更新 => 界面效果没有问题, 但是效率低
        （2）如果结构中还包含输入类的 DOM 时, 会产生错误的 DOM 更新 => 界面效果有问题

    4、开发中如何选择 key?
        （1）最好使用每条数据的唯一标识作为 key, 比如 uuid、手机号、身份证号、学号等唯一的值
        （2）如果不存在对数据的逆序添加、逆序删除等破坏数据之前顺序的操作, 仅用于渲染列表用于展示时, 使用 index 作为 key 时没有问题的
-->

<div id="root">
    <!-- 遍历数组 -->
    <h3>人员列表</h3>
    <button @click.once="addPerson">添加一个老刘</button>
    <ul>
        <li v-for="(person, index) in persons">
            {{ index + 1 }}. {{ person.name }}: {{ person.age }}
            <input type="text">
        </li>
    </ul>
</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            persons: [{
                id: '10001',
                name: '张三',
                age: 19,
            }, {
                id: '10002',
                name: '李四',
                age: 23,
            }, {
                id: '10003',
                name: '王五',
                age: 21,
            },],
        },

        methods: {
            addPerson() {
                const person = {
                    id: '10004',
                    name: '老刘',
                    age: 40,
                }

                // 使用数组的前置添加元素时, 当列表渲染使用 index 作为 key 时会出现乱序的问题
                // 列表渲染使用 id 作为 key 时不会出现乱序的问题
                this.persons.unshift(person)
            },
        },
    })
</script>
</body>
</html>